<template>
	<view class="">
		<view v-if="show == null" class="container" :style="'background:' + 'url(' + $util.img('upload/uniapp/pingtuanshang.png') + ') no-repeat 0 0/100%'">
			<view class="apply">
				<image mode="heightFix">

				</image>
				<view class="p-t-s">
					<view class="p-title">
						申请规则
					</view>
					<view class="p-two">
						成为团长可以参与商品竞标，投资越多，收益越多。
					</view>
					<button type="default" @click="apply">立即申请</button>
					<view class="p-footer">
						点击注册即代表您已同意<text class="text-font-red">《申请协议》</text>
					</view>
				</view>
			</view>

		</view>
		<view class="containers" v-else>


			<view class="audit">
				<view class="header">
					<view class="jindu">
						<view class="">
							<image :src="$util.img('upload/uniapp/register/audit1.png')" mode="widthFix" />
						</view>
						<view class="next"></view>
						<view class="">
							<image :src="$util.img('upload/uniapp/register/audit1.png')" mode="widthFix" />
						</view>
						<view v-if="flag !== 3 && flag !== 4" class="next next-color"></view>
						<view v-else class="next "></view>
						<view class="">
							<image v-if="flag !== 3 && flag !== 4" :src="$util.img('upload/uniapp/register/audit5.png')" mode="widthFix" />
							<image v-else :src="$util.img('upload/uniapp/register/audit1.png')" mode="widthFix" />
						</view>
					</view>
					<view class="header-text">
						<view>申请团长
						</view>
						<view>正在审核
						</view>
						<view v-if="flag == 1" class="small">
							审核结果
						</view>
						<view v-if="flag !== 1">
							审核结果
						</view>
					</view>
				</view>

				<view class="body">
					<image v-if="flag == 2" :src="$util.img('upload/uniapp/register/audit3.png')" mode="widthFix" />
					<image v-if="flag == 4" :src="$util.img('upload/uniapp/register/audit2.png')" mode="widthFix" />
					<image v-if="flag == 3" :src="$util.img('upload/uniapp/register/audit4.png')" mode="widthFix" />
					<text v-if="flag == 2" class="big-text">
						待审核
					</text>
					<text v-if="flag == 4" class="big-text">
						审核通过
					</text>
					<text v-if="flag == 3" class="big-text">
						审核失败
					</text>
					<text v-if="flag == 2" class="small">你的申请正在审核中，请耐心等待~</text>
					<text v-if="flag == 4" class="small">你的申请已审核通过，快开始你的商城之旅吧~</text>
					<text v-if="flag == 3" class="small">很抱歉你的申请没有通过~</text>
					<text v-if="flag == 3" class="small">拒绝原因：{{message}}</text>
					<text class="small" v-if="flag == 3 && Date.parse(new Date()) / 1000 < reapply_submit_check">请于{{ $util.timeStampTurnTime(reapply_submit_check) }}后再次申请</text>
				</view>

				<view class="footer">
					<button v-if="flag == 3 " class="footer-button" @click="reapply()">重新申请</button>
				</view>



			</view>

		</view>
	</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				flag: 1,
				show: null, //根据它显示申请拼团海报页面还是显示审核状态页面
				message: '',
				admin_check_time: '',
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.get_pintuantrader_applydetail()
		},
		computed: {
			reapply_submit_check() {
				return this.admin_check_time + 24 * 60 * 60 * 2;
			}
		},
		methods: {
			get_pintuantrader_applydetail() {
				this.$api.sendRequest({
					url: '/platformpintuan/api/Pintuantrader/applyDetail',
					data: {

					},
					success: res => {
						if (res.code == 0) {
							this.show = res.data.apply_info;
							this.flag = res.data.apply_info.check_status;
							this.message = res.data.apply_info.admin_reject_reason;
							this.admin_check_time = res.data.apply_info.admin_check_time;
						}
					},
				})
			},
			apply() {
				this.$api.sendRequest({
					url: '/platformpintuan/api/Pintuantrader/apply',
					data: {},
					success: res => {
						if (res.code == 0) {
							//console.log(res)
							this.$util.showToast({
								title: `申请成功`,
								icon: 'success',
							});
							this.get_pintuantrader_applydetail()
						} else if (res.code < 0) {
							this.$util.showToast({
								title: '请于' + res.message,
							});
						}
					}
				});
			},
			reapply() {
				this.apply();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.containers {
		background-color: #fff;
		.audit {
		
		
			.header {
				padding-top: 68rpx;
		
				.jindu {
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 0rpx 92rpx;
		
					image {
						width: 23rpx;
						height: 23rpx;
					}
		
					.next-color {
						background-color: #AAACB1;
					}
				}
		
				.next {
					width: 165rpx;
					height: 1rpx;
					background-color: #FD7271;
		
				}
		
				.header-text {
					display: flex;
					justify-content: space-around;
					align-items: center;
		
					.small {
						color: #909399;
					}
				}
			}
		
			.body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 162rpx;
		
				image {
					width: 222rpx;
					height: 221rpx;
				}
		
				.big-text {
					font-size: 34rpx;
				}
		
				.small {
					font-size: 24rpx;
					color: #909399;
					line-height: 48rpx;
				}
			}
		
			.footer {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #838383;
		
				.footer-button {
					width: 624rpx;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 30rpx;
					background: #FF4544;
					margin: 60rpx 0;
					color: #FFFFFF;
				}
			}
		
		}
	}
	
	.container {
		background-color: #FF473D !important;

		.apply {
			width: 100vw;
			/* #ifdef H5  */
			height: calc(100vh - 88rpx) !important;
			// background-image: url(../../../static/pingtuanshang.png);
			/* #endif	  */


			/* #ifdef APP-PLUS  */
			height: calc(100vh + 44rpx) !important;

			/* #endif	  */
			// background-image: url(../../../static/pingtuanshang.png);
			background-size: cover;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex-direction: column;

			image {
				height: 100vh;
				position: relative;
			}



			.p-t-s {
				position: absolute;
				z-index: 999;
				width: 695rpx;
				height: 452rpx;
				background: #FFFFFF;
				border: 0rpx solid #2B2F30;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				margin-bottom: 7%;
				padding: 0 37rpx;

				.p-title {
					font-size: 30rpx;
					font-weight: 500;

					button {
						width: 624rpx;
						height: 90rpx;
					}
				}

				.p-two {
					margin: 40rpx 20rpx 30rpx 20rpx;
				}

				button {
					width: 100%;
					background: #FF4544;
					color: #FFFFFF;
					height: 90rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.p-footer {
					font-size: 24rpx;
					padding-top: 33rpx;
					color: #999999;

					.text-font-red {
						color: #FF4544;
					}
				}

			}


		}


		.audit {


			.header {
				padding-top: 68rpx;

				.jindu {
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 0rpx 92rpx;

					image {
						width: 23rpx;
						height: 23rpx;
					}

					.next-color {
						background-color: #AAACB1;
					}
				}

				.next {
					width: 165rpx;
					height: 1rpx;
					background-color: #FD7271;

				}

				.header-text {
					display: flex;
					justify-content: space-around;
					align-items: center;

					.small {
						color: #909399;
					}
				}
			}

			.body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 162rpx;

				image {
					width: 222rpx;
					height: 221rpx;
				}

				.big-text {
					font-size: 34rpx;
				}

				.small {
					font-size: 24rpx;
					color: #909399;
					line-height: 48rpx;
				}
			}

			.footer {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #838383;

				.footer-button {
					width: 624rpx;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 30rpx;
					background: #FF4544;
					margin: 60rpx 0;
					color: #FFFFFF;
				}
			}

		}
	}
</style>
